<template>
  <div>
    <el-dialog
      :title="formData.id ? '编辑区域' : '添加区域'"
      width="500px"
      :visible="visible"
      @close="$emit('update:visible',false)"
    >
      <el-form
        ref="formRef"
        size="small"
        label-width="140px"
        :model="formData"
        :rules="rules"
      >
        <el-form-item label="区域名称" prop="areaName">
          <el-input v-model="formData.areaName" placeholder="请输入区域名称" />

        </el-form-item>

        <el-form-item label="车位数（个）" prop="spaceNumber">
          <el-input v-model.number="formData.spaceNumber" autocomplete="off" placeholder="请输入车位个数" />
        </el-form-item>

        <el-form-item label="面积（㎡）" prop="areaProportion">
          <el-input v-model="formData.areaProportion" placeholder="请输入面积" />
          <template slot="append">m²</template>
        </el-form-item>

        <el-form-item label="关联计费规则" prop="ruleId">
          <el-select v-model="formData.ruleId" placeholder="请选择" style="width:100%">
            <el-option label="分段计费" :value="1" />
            <el-option label="按次收费" :value="2" />
            <el-option label="按小时收费" :value="3" />
            <el-option label="按分钟收费" :value="3" />
          </el-select>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
        </el-form-item>

        <el-form-item>
          <el-row type="flex" justify="end">
            <el-button @click="visible=false">取消</el-button>
            <el-button type="primary" @click="onSubmit">确定</el-button>
          </el-row>
        </el-form-item>

      </el-form></el-dialog>
  </div>
</template>

<script>
import { addParkAPI, delParkAPI, editParkAPI, getDropAPI } from '@/api/district'
export default {
  props: {
    visible: Boolean
  },
  data() {
    return {
      formData: {
        areaName: '',
        spaceNumber: '',
        areaProportion: '',
        ruleId: '',
        remark: ''

      },
      rules: {
        areaName: [
          { required: true, message: '请输入区域名称', trigger: 'blur' }
        ],
        spaceNumber: [
          { required: true, message: '请输入车位数！' },
          { type: 'number', message: '车位数必须为数字值' }
        ],
        areaProportion: [
          { required: true, message: '请输入面积！' }
        ],
        ruleId: [
          { required: true, message: '请选择关联计费规则！' }
        ]

      },
      DropList: []
    }
  },
  watch: {
    visible(newValue) {
      if (!newValue) {
        this.$refs.formRef.resetFields()
        this.formData = {
          areaName: '',
          spaceNumber: '',
          areaProportion: '',
          ruleId: '',
          remark: ''
        }
      }
    }
  },
  async created() {
    const { data } = await getDropAPI()
    this.DropList = data
  },
  methods: {
    async onDel(id) {
      await this.$confirm('是否确认删除当前区域')
      await delParkAPI(id)
      this.$message.success('删除成功')
      this.$emit('onSuccess')
    },
    // 回填数据
    // async onGetDetailPark(id) {
    //   const res = await getParkAPI(id)
    //   console.log(res)
    //   this.formData = res.data
    // },

    async onChang() {
      await editParkAPI()
    },
    // 下拉区域列表
    // async  getDropList() {
    //   await getDropAPI()
    // },
    async onSubmit() {
      this.$refs.formRef.validate()
      // 判断是新增还是编辑
      if (this.formData.id) {
        await editParkAPI(this.formData)
      } else {
        await addParkAPI(this.formData)
      }

      this.$message.success(!this.formData.id ? '新增成功' : '编辑成功')
      this.$emit('update:visible', false)
      this.$emit('onSuccess')
    }
  }
}
</script>

<style>

</style>
